<template>
   <div class="page">
        <div class="top">
            <h1>再邀1人，立即成团！</h1>
            <div class="txt">
                <p class="time">剩余时间</p>
                <p class="count">23</p>
                <p class="count">53</p>
                <p class="count">41</p>
            </div>
            <div class="head-img">
                <div class="head1">
                    <img class="himg" src="/static/imgs_s08/s08_head-img2.png" alt="">
                    <img class="tz" src="/static/imgs_s08/s08_tz.png" alt="">
                </div>
                <div class="head2">
                    <img class="qm" src="/static/imgs_s08/s08_qm.png" alt="">
                </div>
            </div>
            <div class="dis">
                <div class="dis1"></div>
                <div></div>
                <div></div>
            </div>
            <div class="txt1">
                <div class="txt2">发起拼团</div>
                <div>邀请好友</div>
                <div>拼团发券</div>
            </div>
            <div class="invite">邀请好友参团</div>
        </div>
        <div class="center">
            <div class="menu">
                <div class="imgs">
                    <img src="/static/imgs_s08/s08_goods09.png" alt="">
                </div>
                <div class="txt3">
                    <h3>单人两荤菜外卖套餐</h3>
                    <div class="time">
                        <img src="/static/imgs_s08/s08_time.png" alt="">
                        <p>周一至周日 | 免预约</p>
                    </div>
                    <div class="add">
                        <img src="/static/imgs_s08/s08_address.png" alt="">
                        <p>24小时不成团退款 | 过期自动退</p>
                    </div>
                </div>
                <div class="money">
                    <span>￥15.9</span>
                    <img src="/static/imgs_s08/s08_more.png" alt="">
                </div>
            </div>
            <div class="bottom">
                <div class="title2">
                    <div class="colmun"></div>
                    <p>商家信息</p>
                </div>
                <div class="add">
                    <div class="imgs"></div>
                    <div class="add-txt">
                        <p>汇方圆</p>
                        <div class="add-txt1">
                            <img src="/static/imgs_s08/s08_time.png" alt="">
                            <span>09:30 至 22:30</span>
                        </div>
                        <div class="add-txt1">
                            <img src="/static/imgs_s08/s08_address.png" alt="">
                            <span>63.6km | 中州大道农业路苏荷中心</span>
                        </div>
                    </div>
                    <img class="phone" src="/static/imgs_s08/s08_phone.png" alt="">
                </div>
            </div>
            <div class="pro">
                <div class="title2">
                    <div class="colmun"></div>
                    <p>温馨提示</p>
                </div>
                <div class="tet">
                    <p>·免费提供餐巾纸 </p>
                    <p>·荤菜：宫保鸡丁、鱼香肉丝。</p>
                    <p>·素菜：烧青菜、番茄鸡蛋。</p>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="tui">申请退款</div>

        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .page {
            width: 100%;
            background-color: #ECECEC;
            font-family: "PingFang SC";
        }

        .top {
            width: 100%;
            height: 353px;
            background-color: #fff;
        }

        .top h1 {
            height: 22px;
            font-size: 22px;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
            text-align: center;
            margin: 0 auto;
            margin-top: 22px;
        }

        .top .txt {
            display: flex;
            height: 25px;
            align-items: center;
            justify-content: center;
            margin-top: 29px;
        }

        .txt .time {
            font-size: 12px;
            font-weight: 500;
            color: rgba(163, 165, 168, 1);

        }

        .txt .count {
            width: 20px;
            height: 20px;
            border: 1px solid rgba(50, 177, 108, 1);
            border-radius: 2px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            text-align: center;
            line-height: 20px;
            margin-left: 9px;
        }

        .top .head-img {
            display: flex;
            justify-content: center;
            margin-top: 20px;

        }

        .head-img .head1 {
            position: relative;
            width: 47px;
            height: 47px;
            border-radius: 50%;
            background-color: #F4F4F4;
        }

        .head-img .head2 {
            position: relative;
            width: 47px;
            height: 47px;
            border-radius: 50%;
            margin-left: 27px;
            background-color: #F4F4F4;
        }

        .head1 .himg {
            width: 47px;
            height: 47px;
            border-radius: 50%;
        }

        .head1 .tz {
            position: absolute;
            top: 5px;
            right: -5px;
            width: 23px;
            height: 12px;

        }

        .head2 .qm {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            margin: 0 auto;
        }

        .dis {
            position: relative;
            display: flex;
            justify-content: space-around;
            margin-top: 50px;
        }

        .dis div {
            width: 12px;
            height: 12px;

            background: rgba(163, 165, 168, 1);
            border-radius: 50%;
        }

        .dis .dis1 {
            background: rgba(50, 177, 108, 1);
        }

        .txt1 {
            position: relative;
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
        }

        .txt1 .txt2 {
            color: #32B16C;
        }

        .invite {
            width: 335px;
            height: 41px;
            background-color: #32B16C;
            border-radius: 3px;
            margin: 0 auto;
            margin-top: 40px;
            text-align: center;
            line-height: 41px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .center {
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 54px;
        }

        .menu {
            position: relative;
            display: flex;
            width: 100%;
            height: 91px;
            margin-top: 10px;
            background-color: #fff;
        }

        .menu .imgs {
            position: absolute;
            top: 12px;
            left: 12px;
        }

        .menu .imgs img {
            width: 66px;
            height: 66px;
        }

        .menu .txt3 {
            position: absolute;
            top: 12px;
            left: 87px;
        }

        .txt3 h3 {
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .txt3 img {
            width: 14px;
            height: 14px;
        }

        .txt3 .time {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }

        .txt3 .add {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }

        .menu .money {
            position: absolute;
            top: 42px;
            right: 20px;
        }

        .money img {
            width: 11px;
            height: 11px;
        }

        .money span {
            font-size: 15px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-right: 5px;
        }

        .bottom {
            width: 100%;
            height: 139px;
            background-color: #fff;
            margin-top: 10px;
        }

        .colmun {
            width: 3px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 2px;
            margin-top: 17px;
            margin-left: 15px;
        }

        .title2 {
            display: flex;
            height: 45px;
        }

        .title2 p {
            height: 15px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
            margin-top: 15px;
            margin-left: 7px;
        }

        .bottom .add {
            height: 86px;
            display: flex;
            position: relative;
        }

        .add .imgs {
            width: 79px;
            height: 79px;
            background: rgba(236, 236, 236, 1);
            border-radius: 6px;
            margin-left: 15px;
        }

        .add-txt p {
            font-size: 16px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-left: 9px;
        }

        .add-txt1 img {
            width: 14px;
            height: 14px;
        }

        .add-txt .add-txt1 {
            margin-left: 9px;
            margin-top: 10px;
        }

        .add-txt .add-txt1 span {
            font-size: 11px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);

        }

        .add .phone {
            position: absolute;
            width: 22px;
            height: 22px;
            right: 14px;
            top: 28px;
        }

        .pro {
            width: 100%;
            height: 121px;
            background-color: #fff;
            margin-top: 10px;
        }

        .pro .tet {
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-top: 5px;
            margin-left: 24px;
        }


        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 44px;
            background-color: #fff;
            margin-top: 10px;
        }

        .tui {
            position: absolute;
            right: 15px;
            top: 10px;
            width: 68px;
            height: 26px;
            border: 1px solid rgba(50, 177, 108, 1);
            border-radius: 3px;
            text-align: center;
            line-height: 26px;
            font-size: 13px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
        }
</style>
